<template>
  <el-card style="width: 90%; margin: 0 auto">
    <span style="font-size: 20px; color: black; font-weight: bold; margin-left: 20px">购物车&nbsp;
      <span style="font-weight: normal">（全部&nbsp;{{selectedTotalQuantity}}&nbsp;件）</span>
    </span>
    <div style="font-weight: bold; border-bottom: 1px solid rgb(220, 220, 220); border-top: 1px solid rgb(220, 220, 220); border-radius: 5px; margin-top: 15px">
      <el-table :data="orderArr" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="product" label="商品" align="center">
          <template #default="{ row }">
            <img :src="row.imgUrl" style="width: 130px; float: left;">
            <p style="margin-top: 25px">{{ row.productName }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="size" label="规格" align="center"></el-table-column>
        <el-table-column prop="price" label="单价" align="center"></el-table-column>

        <!-- 修改这里: 添加 el-input-number 组件 -->
        <el-table-column label="数量" align="center">
          <template #default="{ row }">
            <el-input-number v-model="row.num" @change="updateSubtotal(row)" :min="1"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column prop="subtotal" label="小计" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-button type="primary" @click="handleDelete(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin-top: 30px; height: 40px; line-height: 40px; text-align: right">
      <span style="margin-right: 10px">已选<b style="color: red">{{ selectedTotalQuantity }}</b>件商品,</span>
      <span style="margin-right: 10px">共<b style="color: red">{{ selectedTotalSubtotal }}</b>元</span>
      <router-link to="/SubmitOrder" style="color: white;text-decoration: none"><el-button style="width: 120px; font-size: 20px; height: 40px; float: right; background-color: hotpink; color: white; margin-bottom: 30px">去结算</el-button></router-link>
    </div>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";




//购物车显示
const orderArr = ref([]);
//定义商品id规格查询数据
const product = ref({id:'1'})
const select =()=>{
  console.log(product.value.id)
  let data = qs.stringify(product.value)
  console.log("data的数据------------",data)
  axios.get(BASE_URL+"/v1/product/select?"+data).then((response)=>{
    if(response.data.code == 2000){
      orderArr.value=response.data.data;
    }else {
      ElMessage.error(response.data.msg)
    }
  });
}

onMounted(()=>{
  select();
})





const selectedItems = ref([]);
const selectedTotalQuantity = ref(0);
const selectedTotalSubtotal = ref(0);

const handleSelectionChange = (val) => {
  selectedItems.value = val;
  selectedTotalQuantity.value = val.reduce((acc, item) => acc + parseInt(item.num), 0);
  selectedTotalSubtotal.value = val.reduce((acc, item) => acc + parseFloat(item.subtotal), 0);
};

const handleDelete = (id) => {
  const index = orderArr.value.findIndex(item => item.id === id);
  if (index !== -1) {
    orderArr.value.splice(index, 1);
  }
};

const updateSubtotal = (row) => {
  row.subtotal = (row.price * row.num).toFixed(2);
  handleSelectionChange(selectedItems.value); // 更新选择状态和合计信息
};


</script>

<style>
/* 这里可以添加样式 */
</style>
